<template>
  <div class="history__item" @click="$emit('click-item', item)">
    <div class="item-title">
      <svg-icon :icon-class="itemicon" class="fs-16 flex-shrink-0 mr-4"></svg-icon>
      <svg-icon
        icon-class="star-btn"
        class="fs-16 star-btn is-active flex-shrink-0 pos-t-1  "
        v-if="item.is_star"
      ></svg-icon>
      <span class="fs-14">{{ title }}</span>
      <div class="actions">
        <el-popover  placement="top-end" :width="100" trigger="hover">
          <template slot="reference">
            <svg-icon icon-class="ellipsis-btn" class="ellipsis-btn fs-16"></svg-icon>
          </template>
          <div class="actions__list">
            <div class="actions__item" @click.stop="handleEditClick(item)">重命名</div>
            <div class="actions__item" @click.stop="handleDeleteClick(item)">删除</div>
            <div class="actions__item" @click.stop="handleStarClick(item)">
              {{ item.is_star ? '取消收藏' : '收藏' }}
            </div>
          </div>
        </el-popover>
      </div>
    </div>
    <div class="item-desc">{{ item.first_msg_content }}</div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'HistoryListItem',
  components: {
  },
  props: {
    item: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {}
  },
  computed: {
    ...mapGetters(['historyStore']),
    title () {
      if (this.item.knowledge) {
        return `总结：${this.item.title}`
      }
      return this.item.title
    },
    itemicon () {
      if (this.item.knowledge?.documents?.[0].url) {
        return 'history-link-btn'
      }
      if (this.item.knowledge?.documents?.[0].file_type?.toLowerCase().includes('pdf')) {
        return 'history-pdf-btn'
      }
      return 'chat-empty-btn'
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
    // 收藏
    async handleStarClick (item) {
      this.$store.dispatch('history/reuqestStarListItem', item)
    },
    // 删除
    handleDeleteClick (item) {
      this.$store.dispatch('history/requestDeleteListItem', item)
    },
    // 编辑
    handleEditClick (item) {
      this.$store.dispatch('history/setEditItem', item)
    }
  }
}
</script>

<style lang="scss" scoped>
.history__item {
  padding: 10px 14px;
  position: relative;
  cursor: pointer;
  &:hover {
    background: rgba(255,255,255,0.15);
    border-radius: 8px 8px 8px 8px;
    .item-title {
      color: #4e5fff;
    }
    .actions {
      opacity: 1;
    }
  }
}
.item-title {
  font-size: 14px;
  display: flex;
  align-items: center;
  line-height: 20px;
  opacity: 0.8;
  gap: 4px;
  span {
    flex: 1 1 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .star-btn {
    // margin-left: 15px;
    color: $star-btn-active;
    opacity: 1;
  }
}
.item-desc {
  font-size: $font-size-base;
  margin-top: 4px;
  padding-left: 23px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  opacity: 0.5;
  line-height: 16px;
}

.actions {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  // position: absolute;
  // right: 0;
  // top: 0;
  width: auto;
  // height: 100%;
  border-top-right-radius: $border-radius;
  border-bottom-right-radius: $border-radius;
  transition: opacity linear 0.3s;
  opacity: 0;
  // background: linear-gradient(270deg, #000 60%, rgba(238, 239, 255, 0) 100%);
  /deep/.el-popover.el-popper {
    padding: 0;
    min-width: auto;
  }
}
.ellipsis-btn {
  color:#fff;
  opacity: 0.7;
  &:hover {
    opacity: 1;
  }
}
.actions__item {
  font-size: $font-size-base;
  padding: 8px 20px;
  color: #333;
  &:hover {
    background: $list-item-hover;
  }
}
</style>
